<template>
  <wd-navbar
    fixed
    safeAreaInsetTop
    :bordered="false"
    :custom-style="`background-color: rgba(255, 255, 255, ${navbarOpacity}) !important;`"
  >
    <template #left>
      <view
        @tap="select"
        class="border-rd-40rpx h-48rpx w-auto text-align-center line-height-24rpx text-size-24rpx text-[var(--uni-color-error)] bg-[#fff] relative py-12rpx pr-40rpx pl-20rpx box-border after:content-[''] after:absolute after:top-1/2 after:right-20rpx after:-translate-y-1/2 after:border-r-8rpx after:border-r-transparent after:border-r-solid after:border-l-8rpx after:border-l-solid after:border-l-transparent after:border-t-8rpx after:border-t-solid after:border-t-[#10c595]"
      >
        选择
      </view>
    </template>
  </wd-navbar>
  <view
    style="background: linear-gradient(to top right, #10c595, #00ccc7)"
    class="w-full h-665rpx"
  ></view>
  <!-- 绑定点击事件 -->
  <!-- <view @click="handleLogin">登录按钮</view>  -->
  <view class="font-bold w-100rpx text-[var(--uni-custom-color)]" @tap="changeLanguage('en')">
    {{ $t('message.hello') }}
  </view>
  <view class="text-secondary">会根据主题自动切换颜色</view>
  <wd-button @click="toggleTheme('light')">浅色主题</wd-button>
  <wd-button @click="toggleTheme('dark')">深色主题</wd-button>
  <wd-cell title="标题文字" value="内容" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { useUserStore } from '@/store/user' // 引入用户 store
import { useThemeStore } from '@/store/theme'
import { useI18n } from 'vue-i18n'
import { Locale } from 'wot-design-uni'
// 引入英文语言包
import enUS from 'wot-design-uni/locale/lang/en-US'
const { t, locale } = useI18n()
const themeStore = useThemeStore()
// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
// 检查 safeAreaInsets 是否存在
const safeAreaInsets = systemInfo.safeAreaInsets || { top: 0, right: 0, bottom: 0, left: 0 }
// 定义导航栏透明度的响应式变量
const navbarOpacity = ref(0)
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
const title = ref('Hello')
const now = dayjs()
const formattedDate = ref(now.format('YYYY-MM-DD HH:mm:ss'))

const userStore = useUserStore()
const select = () => {
  console.log('选择')
}
// 定义处理登录事件的函数
const handleLogin = async () => {
  try {
    const username = 'your_username' // 这里可以替换为实际获取用户名的逻辑
    const password = 'your_password' // 这里可以替换为实际获取密码的逻辑
    const response = await userStore.login(username, password)
    console.log('登录成功', response)
  } catch (error) {
    console.error('登录失败', error)
  }
}
const toggleTheme = (theme: string) => {
  themeStore.setTheme(theme)
}
// 使用 onPageScroll 监听页面滚动
onPageScroll((e) => {
  const scrollTop = e.scrollTop
  // 假设滚动 40px 时导航栏完全不透明
  const maxScroll = safeAreaInsets.top + 40
  navbarOpacity.value = Math.min(scrollTop / maxScroll, 1)
})
// 修改主题变量
themeStore.setThemeVars({
  colorTheme: '#ff0000',
  buttonPrimaryBgColor: '#ff0000',
})

// 在 JS/TS 中使用
console.log(t('message.hello'))

// 动态切换语言
function changeLanguage(lang: string) {
  locale.value = lang
  Locale.use('en-US', enUS)
}
</script>

<style lang="scss" scoped></style>
